<template>
  <TodoOperate @on-add="add" @on-change-status="changeStatus"></TodoOperate>
  <TodoList :render-list="renderList" @on-toggle-status="toggleStatus"></TodoList>
  <div>剩余{{leftNum}}未完成</div>
</template>

<script setup lang="ts">
import { reactive, ref, computed } from 'vue'
import TodoList from './TodoList.vue'
import TodoOperate from './TodoOperate.vue'
interface TodoItem {
  id: number,
  title: string,
  isDone: boolean
}

const todoList = reactive<TodoItem[]>([
  {
    id: 1,
    title: 'chifan',
    isDone: false
  }
])
const status = ref<string>('all')

const add = (newTodo: string) => {
  const id = todoList.length
  todoList.push({
    id: id,
    title: newTodo,
    isDone: false
  })
}
const changeStatus = (v: string) => {
  status.value = v
}
const toggleStatus = (index: number) => {
  todoList[index].isDone = !todoList[index].isDone
}
const renderList = computed(() => {
  switch (status.value) {
    case 'done':
      return todoList.filter(item => item.isDone)
    case 'notDone':
      return todoList.filter(item => !item.isDone)

    default:
      return todoList
  }
})
const leftNum = computed(() => {
  return todoList.filter(item => !item.isDone).length
})
</script>

<style scoped>

</style>
